<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            getUser(1);

            $("#pre").click(function(){
                var pageNo= parseInt($("#currentPage").html())-1;
                getUser(pageNo);

            });
            $("#next").click(function(){
                var pageNo= parseInt($("#currentPage").html())+1;
                getUser(pageNo);

            });

            function getUser(pageNo){
                $("#tUsers tr:not(:first)").remove();
                //$("#tUsers tr:not(:first)").empty();
                $.getJSON("/user/getUserByPageNo/"+pageNo, function(json){
                    //alert("JSON Data: " + json);
                    //alert("JSON Data: " + json.totalPageNo);
                    $("#totalPage").html(json.totalPageNo);
                    $("#currentPage").html(json.currentPage);
                    $.each(json.users, function(i,item){
                        // alert(item.name);
                        $("#tUsers").append("<tr><td><input type='radio' class='r1'></td><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.clazz+"</td></tr>");
                    });

                    checkButton(json.currentPage,json.totalPageNo);
                });
            }


            function checkButton(pageNo,totalNo){
                $('#pre').attr("disabled",false);
                $('#next').attr("disabled",false);

                if(pageNo==1){
                    $("#pre").attr("disabled","disabled");
                }

                if(pageNo==totalNo){
                    $("#next").attr("disabled","disabled");
                }
            }
            $("#update").click(function(){

                $.ajax({
                    type : "POST",
                    url : "/user/updateUser",
                    dataType : "json",
                  // contentType : "application/json",
                    data : {
                        id:$("#tUserId").val(),
                        name:$("#tUserName").val()
                    },
                    success : function(data) {
                        console.log(data);

                    },
                    error : function(xhr,textStatus) {
                        console.log('错误');
                        console.log(xhr);
                        console.log(textStatus);
                    }
                });
            })


        });
    </script>
</head>
<body>
<button id="pre">上一页</button>
<button id="next">下一页</button>
<br/>
totalPage:<p id="totalPage"></p>
currentPage:<p id="currentPage"></p>
<table id="tUsers" border="1">
    <tr>
        <th> </th>
        <th>id</th>
        <th>name</th>
        <th>class</th>
    </tr>

</table>
id:<input type="text" id="tUserId"/>
<br/>
name:<input type="text" id="tUserName">

<button id="update"></button>
</body>
</html>